<template>
    <a-modal :keyboard="false" :maskClosable="false" title="菜单编辑" :open="visible" :width="700" :confirmLoading="loading" centered @ok="handleSubmit" @cancel="handleCancel">
        <a-form layout="vertical">
            <a-row :gutter="16">
                <a-col :span="12" v-if="modelRef.id">
                    <a-form-item label="父级菜单">
                        <!-- <a-cascader v-model:value="modelRef.parentId" :options="menuList" :fieldNames="{ label: 'name', value: 'id', children: 'children' }" /> -->
                        <a-tree-select
                            v-model:value="modelRef.parentId"
                            style="width: 100%"
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                            placeholder="请选择"
                            allow-clear
                            :tree-data="menuList"
                            :field-names="{
                                children: 'children',
                                label: 'name',
                                value: 'id',
                            }"
                        >
                            <!-- <template #title="{ value: val, label }">
                                <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
                                <template v-else>{{ label }}</template>
                            </template> -->
                        </a-tree-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="菜单分类" v-bind="validateInfos.type">
                        <a-radio-group v-model:value="modelRef.type">
                            <a-radio :value="1">目录</a-radio>
                            <a-radio :value="2">菜单</a-radio>
                            <a-radio :value="3">按钮</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="菜单类型" v-bind="validateInfos.menuType">
                        <a-radio-group v-model:value="modelRef.menuType">
                            <a-radio :value="1">APP</a-radio>
                            <a-radio :value="0">后台</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="菜单名称" v-bind="validateInfos.name">
                        <a-input v-model:value="modelRef.name" />
                    </a-form-item>
                </a-col>
                <a-col :span="12" v-if="modelRef.type === 2">
                    <a-form-item label="菜单redirect" v-bind="validateInfos.redirect">
                        <a-input v-model:value="modelRef.redirect" />
                    </a-form-item>
                </a-col>
                <a-col :span="12" v-if="modelRef.type === 2">
                    <a-form-item label="菜单path" v-bind="validateInfos.path">
                        <a-input v-model:value="modelRef.path" />
                    </a-form-item>
                </a-col>
                <a-col :span="12" v-if="modelRef.type === 2">
                    <a-form-item label="菜单component" v-bind="validateInfos.component">
                        <a-input v-model:value="modelRef.component" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="排序" v-bind="validateInfos.sort">
                        <a-input-number :step="1" :min="0" v-model:value="modelRef.sort" style="width: 100%" />
                    </a-form-item>
                </a-col>
                <a-col :span="12" v-if="modelRef.type === 3">
                    <a-form-item label="权限编码" v-bind="validateInfos.permission">
                        <a-input v-model:value="modelRef.permission" />
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="hideInMenu" v-bind="validateInfos.alwaysShow">
                        <a-radio-group v-model:value="modelRef.alwaysShow">
                            <a-radio :value="1">是</a-radio>
                            <a-radio :value="0">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="状态" v-bind="validateInfos.status">
                        <a-radio-group v-model:value="modelRef.status">
                            <a-radio :value="1">启用</a-radio>
                            <a-radio :value="0">禁用</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
            </a-row>

            <!-- <a-form-item label="是否缓存" v-bind="validateInfos.keepAlive">
                <a-radio-group v-model:value="modelRef.keepAlive">
                    <a-radio :value="1">是</a-radio>
                    <a-radio :value="0">否</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="是否可见" v-bind="validateInfos.visible">
                <a-radio-group v-model:value="modelRef.visible">
                    <a-radio :value="1">是</a-radio>
                    <a-radio :value="0">否</a-radio>
                </a-radio-group>
            </a-form-item> -->
        </a-form>
    </a-modal>
</template>

<script lang="ts">
    import type { PropType } from 'vue';
    import { defineComponent, reactive, ref, watchEffect, watch } from 'vue';
    import { Form, message } from 'ant-design-vue';
    import type { CreateMenuParams } from '@/api/user/menu';
    import { createMenu, updateMenu, getMenu, getMenuListTree } from '@/api/user/menu';
    import { cloneDeep, isUndefined } from 'lodash-es';
    import { menuTypeMap } from './common';

    export default defineComponent({
        props: {
            visible: {
                type: Boolean,
                required: true,
            },
            model: {
                type: Object as PropType<CreateMenuParams | null>,
                default: () => null,
            },
        },
        emits: ['cancel', 'success'],
        setup(props, { emit }) {
            const loading = ref(false);
            const defaultForm = {
                name: '',
                value: '',
                status: 1,
                menuType: 0,
                sort: 9999,
            };
            const modelRef = reactive<any>(cloneDeep(defaultForm));
            const rulesRef = reactive({
                name: [{ required: true, message: '请输入菜单名称' }],
                // value: [{ required: true, message: '请输入菜单编码' }],
                type: [{ required: true, message: '请输入菜单分类' }],
            });
            const { validateInfos, resetFields, validate } = Form.useForm(modelRef, rulesRef);

            // 记录初始值
            const initValues = reactive({});
            const menuList = ref([]);
            watch(
                () => props.visible,
                () => {
                    Object.assign(initValues, cloneDeep(props.model));
                },
            );
            watchEffect(() => {
                if (props.visible) {
                    console.log(props.model);

                    if (props.model) {
                        Object.assign(modelRef, props.model);
                        if (modelRef.id) {
                            getMenu(modelRef.id).then(res => {
                                Object.assign(modelRef, res.data);
                                getMenuListTree({ current: 1, size: 100, menuType: res.data.menuType }).then(res => {
                                    menuList.value = res.data;
                                });
                            });
                        }
                    }
                }
            });

            const handleCancel = () => {
                resetFields();
                Object.keys(modelRef).forEach(key => {
                    delete modelRef[key];
                });
                Object.assign(modelRef, { ...cloneDeep(defaultForm) });
                emit('cancel');
            };

            const handleSubmit = async () => {
                validate().then(() => {
                    loading.value = true;
                    const { parentName, ...lastModel } = modelRef;
                    if (!isUndefined(parentName)) {
                        modelRef.parentId = lastModel.id;
                        delete lastModel.id;
                    }
                    (isUndefined(lastModel.id) ? createMenu : updateMenu)(lastModel)
                        .then(res => {
                            if (res.data) {
                                message.success('操作成功');
                                emit('success');
                                handleCancel();
                            }
                        })
                        .finally(() => {
                            loading.value = false;
                        });
                });
            };
            return {
                menuTypeMap,

                loading,

                modelRef,
                validateInfos,
                resetFields,

                handleSubmit,
                handleCancel,

                initValues,
                menuList,
            };
        },
    });
</script>
